<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    top="2vh"
    width="80%"
    @close="closeDialog"
  >
    <el-form
      v-if="dialogVisible"
      ref="TemplateForm"
      :model="templateFormData"
      :rules="formDataRules"
      label-width="100px"
      style="height: 67vh;overflow-y: auto"
      class="scroll-style"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="模板名称:" prop="name">
            <el-input v-model="templateFormData.name" placeholder="请输入名称"/>
          </el-form-item>
          <el-form-item label="模板分类:" prop="catalog">
            <el-select v-model="templateFormData.catalog" placeholder="请选择或输入新的分类" clearable
                       style="width: 100%;">
              <el-option v-for="item in catalogOption" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </el-form-item>
          <el-form-item label="描述:" prop="description">
            <el-input
              v-model="templateFormData.description"
              type="textarea"
              :autosize="{minRows:5, maxRows:10}"
              :row="5"
              placeholder="请输入描述"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="模板内容:" prop="templateStr" label-width="100px">
            <el-input
              v-model="templateFormData.templateStr"
              type="textarea"
              :rows="20"
              resize="none"
              placeholder="请输入模板内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {cloneDeep} from "lodash-es";
import {saveTemplate, updateTemplate} from "@/api/tool/genTemplate";

export default {
  name: "SaveTemplate",
  props: {
    catalogOption: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      templateFormData: {},
      formDataRules: {
        catalog: [{required: true, trigger: 'change', message: '请选择或输入新的分类'}],
        templateStr: [{required: true, trigger: 'blur', message: '模板内容不能为空'}],
        name: [{required: true, trigger: 'blur', message: '模板名称不能为空'}]
      },
      btnLoading: false
    }
  },
  methods: {
    // 打开弹窗
    openDialog(rowData) {
      if (rowData) {
        this.templateFormData = cloneDeep(rowData)
      }
      this.dialogTitle = rowData && rowData.id ? '编辑模板' : '新增模板'
      this.dialogVisible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.templateFormData = {}
      this.$refs.TemplateForm.clearValidate()
      this.dialogVisible = false
      this.btnLoading = false
    },
    // 提交表单
    submitForm() {
      this.btnLoading = true
      this.$refs.TemplateForm.validate(valid => {
        if (valid) {
          const saveData = cloneDeep(this.templateFormData)
          if (saveData.id) {
            updateTemplate(saveData).then(() => {
              this.$message.success("修改成功")
              this.closeDialog()
              this.$emit('flushData')
            }).finally(() => this.btnLoading = false)
          } else {
            saveTemplate(saveData).then(() => {
              this.$message.success("保存成功")
              this.closeDialog()
              this.$emit('flushData')
            }).finally(() => this.btnLoading = false)
          }
        } else {
          this.btnLoading = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
